<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程详情</title>
    <link rel="stylesheet" href="/education/res/js/plugin/layui/css/layui.css">
    <style>
        body {
            font-size: 14px;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        ul, li {
            list-style: none;
        }

        #container {
            position: absolute;
            max-width: 1280px;
            left: 0;
            right: 0;
            margin: auto;
            top: 0;
            bottom: 0;
        }

        .tab a {
            line-height: 50px;
            width: 150px;
            display: inline-block;
            text-align: center;
        }

        .tab a:hover {
            color: #00a2d4;
        }

        .tab-selected {
            border-bottom: 3px solid #00a2d4;
            color: #00a2d4;
        }

        #content {

        }

        #content #desc, #content #dict {
            position: absolute;
            top: 80px;
            bottom: 20px;;
            left: 20px;;
            right: 20px;;
        }

        #editor-content {
            max-height: 1000px;
            min-height: 500px;
            width: 100%;
            box-sizing: border-box;
        }

        #list .item {
            line-height: 40px;
            box-sizing: border-box;
            margin-bottom: 20px;
        }

        #list .child-item {
            line-height: 40px;
            background: #f3f3f3;
            box-sizing: border-box;
            padding: 0 20px;
            margin-top: 20px;
        }

        #list .child-item:hover {
            background: #e3e3e3;
            cursor: pointer;
        }

        #list .title {
            font-weight: bold;
            font-size: 15px;
        }

        #list li {
            box-sizing: border-box;
        }

        #list .handler {
            margin-left: 30px;
            display: none;
        }

        #list .handler i {
            margin-left: 5px;
        }

        #btn-save {
            position: absolute;
            top: 40px;
            right: 30px;
        }

        .handler-show {
            display: inline-block;
        }

        .custom-dialog {
            display: none;
            padding-right: 20px;
            box-sizing: border-box;
            padding-top: 20px;
        }

        .test {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

</head>
<body>
<div id="container">
    <div class="tab">
        <a class="tab-selected" id="tab1">课程概述</a>
        <a id="tab2">目录</a>
    </div>

    <div id="content">
        <button id="btn-save" class="layui-btn  layui-btn-normal layui-btn-sm">保存</button>
        <div id="desc">
            <script id="editor-content" type="text/plain" name="content"></script>
        </div>
        <div id="dict" style="display: none;overflow-y: auto">
            <button class="layui-btn layui-btn-normal" id="btn-new-dir">+新建</button>
            <ul id="list">

                <!--                    <ul>-->
                <!--                        <li class="child-item"><i-->
                <!--                                class="layui-icon layui-icon-play"></i><span>【录播试听课】0素材+手绘+合成</span><span>(130分钟)</span>-->
                <!--                        </li>-->
                <!--                        <li class="child-item"><i-->
                <!--                                class="layui-icon layui-icon-play"></i><span>【录播试听课】0素材+手绘+合成</span><span>(130分钟)</span>-->
                <!--                        </li>-->
                <!--                        <li class="child-item"><i-->
                <!--                                class="layui-icon layui-icon-play"></i><span>【录播试听课】0素材+手绘+合成</span><span>(130分钟)</span>-->
                <!--                        </li>-->
                <!--                    </ul>-->

            </ul>
        </div>
    </div>
</div>

<!--添加对话框-->
<div class="custom-dialog" id="add-dialog">
    <input type="hidden" id="parentId">
    <div id="add_form" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">章节名称</label>
            <div class="layui-input-block">
                <input type="text" id="title" lay-verify="required" placeholder="请输入内容" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">章节状态</label>
            <div class="layui-input-block">
                <select id="status" lay-filter="status" name="course_state" value="0">
                    <option value="0">未直播</option>
                    <option value="1">直播中</option>
                    <option value="2">录播</option>
                    <option value="3">其他资源</option>
                </select>
            </div>
        </div>
        <!--视频相关-->
        <div class="layui-form-item" id="layout-rtmp">
            <label class="layui-form-label">推流地址</label>
            <div class="layui-input-block">
                <input type="text" id="rtmp" lay-verify="required" placeholder="请输入推流rtmp地址" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" id="layout-upload">
            <label class="layui-form-label">上传附件</label>
            <div class="layui-input-block">
                <div class="layui-progress" lay-showPercent="true" style="margin:5px 0" lay-filter="progress">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                </div>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="upload-file">多选</button>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">章节难度</label>
            <div class="layui-input-block">
                <select id="easy" lay-filter="easy" name="ease">
                    <option value="0">初级</option>
                    <option value="1">中级</option>
                    <option value="2">高级</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <input type="text" name="startTime" id="startDate" lay-verify="datetime" placeholder="请选择课程开始时间"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-block">
                <input type="text" name="endTime" id="endingDate" lay-verify="datetime" placeholder="请选择课程结束时间"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

    </div>
</div>
</body>


<script src="/education/res/js/src/context.js"></script>
<script src="/education/res/js/plugin/jquery-2.2.4.min.js"></script>
<script src="/education/res/js/plugin/layui/layui.js"></script>
<script src="/education/res/js/util.js"></script>
<script type="text/javascript" charset="utf-8" src="/education/res/js/plugin/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/education/res/js/plugin/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="/education/res/js/plugin/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
    // var parentId = window.util.getUrlParam('id');
    var parentId = 15;
    var parentInfo;
    layui.use(['layer', 'upload', 'form', 'laydate','element'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        var form = layui.form;
        var layData = layui.laydate;
        var element = layui.element;
        //监听课程状态选择
        form.on('switch(status)', function (data) {

        });
        //开始日期
        layData.render({
            elem: '#startDate'
            , type: 'datetime'
        });
        //结束日期
        layData.render({
            elem: '#endingDate'
            , type: 'datetime'
        });
        upload.render({
            elem: '#upload-file'
            , url: context + '/api/fileupload/add'
            , field: 'attach'
            , accept: 'file'
            , size: 1024 * 2
            , multiple: true

            , allDone: function (obj) { //当文件全部被提交后，才触发
                element.progress('progress', (obj.successful/obj.total*100)+'%');
                console.log(obj.total); //得到总文件数
                console.log(obj.successful); //请求成功的文件数
                console.log(obj.aborted); //请求失败的文件数
            }
            , done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”

            }
        });
        loadCourseData();
        loadDirData();
    });
    // tab点击事件
    $(".tab").find('a').click(function () {
        $(".tab").find('a').removeClass('tab-selected');
        $(this).addClass('tab-selected');
        var id = $(this).prop('id');
        var descDiv = $('#desc');
        var dictDiv = $('#dict');
        descDiv.hide();
        dictDiv.hide();
        switch (id) {
            case 'tab1':
                descDiv.show();
                break;
            case 'tab2':
                dictDiv.show();
                break;
        }
    });

    // 新建目录
    $('#btn-new-dir').click(function () {
        showDialog(parentId);
    });
    // 显示隐藏操作
    var list = $('#list');
    list.find('li').mouseenter(function () {
        $(this).find('span.handler').show();
    });
    list.find('li').mouseleave(function () {
        $(this).find('span.handler').hide();
    });
    // 添加
    list.find('.desc.html').click(function () {
        console.log('aaa');
    });
    // 编辑
    list.find('.edit').click(function () {
        console.log('aaa');
    });
    // 删除
    list.find('.del').click(function () {
        console.log('aaa');
    });
    var ue = UE.getEditor('editor-content');
    //监听浏览器宽度的改变
    window.onresize = function () {
        ue.setHeight($('#editor-content').height());
    };


    function showDialog(parentId) {
        layer.open({
            type: 1,
            area: ['500px', '350px'],
            btn: ['添加', '取消'],
            title: '添加新章节',
            content: $('#add-dialog'),
            yes: function (index) {
                var title = $('#title');
                var status = $('#status');
                var startTime = $('#startDate');
                var endTime = $('#endingDate');
                var easy = $('#easy');
                if (window.util.isEmpty(title.val())) {
                    title.focus();
                    layer.msg("标题不能为空")
                    return;
                }
                if (window.util.isEmpty(startTime.val())) {
                    startTime.focus();
                    layer.msg("选择开始时间")
                    return;
                }
                if (window.util.isEmpty(endTime.val())) {
                    endTime.focus();
                    layer.msg("选择结束时间")
                    return;
                }
                var data = {
                    parent_id: parentId,
                    major_id: parentInfo.major_id,
                    course_subject: parentInfo.course_subject,
                    course_teacher_id: parentInfo.course_teacher_id,
                    course_task: title.val(),
                    course_state: status.val(),
                    startTime: startTime.val(),
                    endTime: endTime.val(),
                    ease: easy.val()
                };
                layer.close(index);
                createNewItem(data);
            }
        });
    }

    //加载课程信息
    function loadCourseData() {
        $.ajax({
            url: context + '/api/educourse/getOne?course_id=' + parentId,
            success: function (result) {
                if (result.success) {
                    parentInfo = result.data;
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取失败");
            }
        });
    }

    //加载目录
    function loadDirData() {
        $.ajax({
            url: context + '/api/educourse/getTask?course_id=' + parentId,
            success: function (result) {
                if (result.success) {
                    var data = result.data;
                    var list = $('#list');
                    list.empty();
                    for (var i = 0; i < data.length; i++) {
                        var li = '    <li class="item"><span class="title">0' + (i + 1) + '【' + courseStatus[data[i].course_state] + '】' + data[i].course_task + ' </span><span\n' +
                            '                        class="handler">\n' +
                            '                        <i class="layui-icon add" title="添加">&#xe654;</i>\n' +
                            '                         <i class="layui-icon edit" title="编辑">&#xe642;</i>\n' +
                            '                         <i class="layui-icon del" title="删除">&#xe640;</i>\n' +
                            '                    </span>\n' +
                            '                </li>';
                        list.append(li);
                    }
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取失败");
            }
        });
    }

    //新建目录
    function createNewItem(data) {
        $.ajax({
            url: context + '/api/educourse/insertOne',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json;charset-UTF-8",
            data: JSON.stringify(data),
            success: function (result) {
                if (result.success) {
                    loadDirData();

                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("添加失败");
            }
        });
    }
</script>
</html>
